<template>
	<view class="down_pages" v-show="isDownShow">
		<view class="classScreen">
			<view class="screePage" v-for="(item,index) in list" :key="index" @click="choseBtn(item)">
				<view class="screImg">
					<image :src="item.imgUrl" mode=""></image>
				</view>
				<view class="screeName">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="tap"></view>
	</view>
</template>
<script>
	export default {
		props: {
			isDownShow: {
				default: false,
				type: Boolean
			},
		},
		data() {
			return {
				list: [
					/* {
						id: 0,
						name: '发起群聊',
						imgUrl: '../../static/img/chat.png'
					},
					{
						id: 1,
						name: '添加朋友',
						imgUrl: '../../static/img/add.png'
					},
					{
						id: 2,
						name: '扫一扫',
						imgUrl: '../../static/img/scan.png'
					},
					{
						id: 3,
						name: '收付款',
						imgUrl: '../../static/img/pay.png'
					} */
				]
			};
		},
		methods: {
			choseBtn(data) {
				this.$emit('choseBtn', data)
			}
		}
	}
</script>


<style lang="scss">
	.down_pages {
		position: absolute;
		right: 10px;
		z-index: 999;

		.classScreen {
			width: 125px;
			height: 184px;
			background-color: #4C4C4C;
			color: #fff;
			text-align: center;
			border-radius: 8rpx;
			line-height: 30px;
			z-index: 99;
			overflow: hidden;
			box-sizing: border-box;

			.screePage {
				height: 35px;
				border-bottom: 1px solid #5b5b5b;
				display: flex;
				align-items: center;
				padding: 5px;

				.screImg {
					width: 28px;
					height: 28px;
					padding-left: 2px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.screeName {
					margin-left: 10px;
					font-size: 32rpx;
				}
			}
		}
	}

	.down_pages::before {
		content: '';
		display: block;
		position: absolute;
		top: -15rpx;
		right: 8rpx;
		width: 0;
		height: 0;
		border-left: 30rpx solid transparent;
		border-right: 30rpx solid transparent;
		border-bottom: 30rpx solid #4C4C4C;
	}
</style>
